<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>登录页面</title>
</head>

<body>
  <h1>用户登录</h1>
  用户名：<input name="userName" type="text" id="userName"><br>
  密码：<input name="password" type="password" id="password"><br>
  <input type="button" value="登录" onclick="login()">
  
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script>
    function login() {
      //里面是一个对象,是一个异步调用(先拿到数据,但是要等后端返回之后,才会开始下一步)
      $.ajax({
        url:"/user/login",
        type:"post",//需要告知请求类型
        //有数据就加入data,没有数据也可以取掉
        data: {
          "userName":$("#userName").val(),
          "password": $("#password").val()
        },
        success: function(result){
          //表示的是后端接口的成功还是失败,不是代表后端返回了什么
            if(result){
              //返回结果为true,进行页面跳转
              location.href="index.html";
            }else{
              //密码错误
              alert("密码错误!");
            }
        }
      });
    }

  </script>
</body>

</html>